//请求参数，因为后面要修改，所以设置全局变量
let data = {
    pagenum: 1,   //页码，默认获取第一页的数据
    pagesize: 2   //一页两条数据
    //state：'已发布',  做筛选的时候再加state和cate_id参数
    //cate_id：2     表示只获取分类id为2的文章
}

//封装函数获取数据，并渲染到表格中     获取文章列表
function renderList() {
    $.ajax({
        url: '/my/article/list',
        data: data,
        success: function (res) {
            // console.log(res);
            // layer.msg(res.message)
            if (res.status == 0) {
                let html = '';
                $.each(res.data, function (index, value) {
                    html += `  <tr>
                                <td>${value.title}</td>
                                <td>${value.cate_name}</td>
                                <td>${value.pub_date}</td>
                                <td>${value.state}</td>
                                <td>
                                    <a href="./edit.html?id=${value.id}" type="button" class="layui-btn layui-btn-xs">编辑</a>
                                    <button type="button" data-id=${value.id} class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
                                </td>
                                </tr>
                            `
                })
                $('tbody').html(html)
                // console.log(res.total);

                //获取分页    也可以封装函数进行传参
                var laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'page',//注意，这里的 test1 是 ID，不用加 # 号
                    count: res.total,//数据总数，从服务端得到    传参
                    curr: data.pagenum,   //获取当前页码
                    limit: data.pagesize,   //获取每页数据的条数
                    limits: [2, 3, 5, 7, 9],    //每页显示的数据天数
                    //自定义布局
                    layout: ['limit', 'prev', 'page', 'next', 'count', 'skip'],
                    //一进入页面，jump就执行一次，此时first的值为true，切换页码时，first值为undefined
                    jump: function (obj, first) {
                        //obj包含了当前分页的所有参数，比如：
                        // console.log('当前页', obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        // console.log('每页显示的条数', obj.limit); //得到每页显示的条数
                        // console.log(first);
                        //首次不执行
                        if (!first) {
                            data.pagenum = obj.curr
                            data.pagesize = obj.limit
                            renderList()
                        }
                    }
                });
            }
        }
    })
}
renderList()

//动态生成下拉框数据渲染到下拉框
$.ajax({
    url: '/my/category/list',
    success: function (res) {
        // console.log(res);
        if (res.status == 0) {
            let html = '';
            res.data.forEach(item => {
                html += `  <option value="${item.id}">${item.name}</option>`
            });
            $('#category').append(html)
            let form = layui.form
            form.render()   //不给参数就是更新全部    更新渲染
        }
    }
})

//给表单添加提交事件         完成搜索功能
$('#search').on('submit', function (e) {
    e.preventDefault()
    let cate_id = $('#category').val()
    let state = $('#state').val()
    cate_id ? data.cate_id = cate_id : delete data.cate_id
    state ? data.state = state : delete data.state
    data.pagenum = 1
    renderList()
})

//给删除按钮添加点击事件       删除数据
$('tbody').on('click', 'button:contains("删除")', function () {
    let id = $(this).data('id')
    let that = $(this)
    // console.log(id);
    layer.confirm('你确定要删除吗？', function (index) {
        that.parents('tr').remove()
        $.ajax({
            url: '/my/article/delete/' + id,
            success: function (res) {
                // console.log(res);
                layer.msg(res.message)
                if (res.status == 0) {
                    if ($('tbody').children().length > 0) {
                        renderList()
                    } else {
                        data.pagenum--
                        if (data.pagenum == 0) {
                            return
                        }
                        renderList()
                    }
                }
            }
        })
        layer.close(index);
    })
})